<template>
	<view class="publishProduct">
		<u-form :model="form" ref="form1" class="formBox">

			<!-- 商品规格 商品品牌 -->
			<view class="formBox1 formTop">
				<view class="f28 c3d mt24">
					新建店铺分类名称 <text class="error ml8">*</text>
				</view>
				<u-form-item label=" " prop="name">
					<view class="ml12 flex1">
						<u-input v-model="form.name" placeholder="请输入店铺名称" />
					</view>
				</u-form-item>
				<u-form-item label=" " prop="select1">
					<view class="f28 c3d wsn">
						父级类目 <text class="error ml8">*</text>
					</view>
					<view class="flex1">
						<view class="ml24 flex">
							<view class="selectInput">
								<view class="flex selectInputBox">
									<u-input class="flex1 input" border placeholder="请选择店铺中分类"
										v-model="selectList.current1.label"></u-input>
									<u-button type="primary" class="ml20 btn" @click="btnInputSelect(1)">搜索</u-button>
								</view>
							</view>
							<view class="selectInputName">
								<u-input @click="btnInputSelect(1)" v-model="selectList.current1.label" type="select"
									placeholder="" />
							</view>

						</view>


					</view>
				</u-form-item>


				<u-form-item label=" " prop="img1">
					<view class="">
						<view class="f28 c3d wsn w100">
							店铺分类图片 <text class="error ml8">*</text>(最多1张)
						</view>
						<!--图片-->
						<view class="show-box" v-if='form.img1'>
							<image class="full imgs" :src="$wanlshop.oss(form.img1)" @tap="previewImage(item)" mode="">
							</image>
							<view class="delect-icon" @click="delectImg(0,'img1')">
								<image class="full" :src="clearIcon" mode=""></image>
							</view>
						</view>
						<view v-if='!form.img1' @tap="chooseImages('img1',1)" class="mb16 box-mode">
							<image class="full" :src="selectfile" mode=""></image>
						</view>
					</view>
				</u-form-item>

			</view>

		</u-form>

		<u-select child-name='childlist' :mode='selectList.mode' value-name='id' label-name='name'
			v-model="selectList.show" :list="selectList.list" @confirm="onSelect"></u-select>
		<view class="btnSub mt20">
			<button class="btn" @click="submit" :loading="btnLoading">确定新建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 筛选数组数据
				selectList: {
					// "single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
					mode: '',
					selectIndex: '',
					list: [{
						value: 1,
						label: '男',
					}],
					current1: {
						label:''
					},
					current2: {},
					show: false,

				},
				btnLoading: false,
				// 表单数据
				form: {
					name: '',
					select1: '',
					img1: '',

				},
				// 校验
				rules: {
					name: [{
						required: true,
						message: '请填写商品标题',
						trigger: ['change', 'blur'],
					}],
					select1: [{
						required: true,
						message: '请选择商品类目',
					}],

					img1: [{
						required: true,
						message: '请上传商品主图',
						trigger: ['change', 'blur'],
					}],
					text: [{
						required: true,
						message: '请输入品牌介绍内容',
						trigger: ['change', 'blur'],
					}],

				},
				// 上传图片
				uploadurl: null,
				multipart: null,
				clearIcon: 'https://img.aibbyp.com/wechat/images/nHome/close.png',
				selectfile: 'https://img.aibbyp.com/wechat/images/nHome/tpsc.png',
			}
		},
		onLoad() {
			this.getMultipart() // 获取上传限制

		},
		onShow() {

		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			// 递归删除没用的数据
			funRecursion(data, type) {
				if (type == 'lm') {
					data.forEach(res => {
						if (res.childlist[0]) {
							this.funRecursion(res.childlist, 'lm')
						} else {
							delete res.childlist
						}
					})
					uni.hideLoading()
					return data
				}
			},
			// 获取商品品牌
			getbrandList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.get({
					url: '/store.product/InAddStoreCate?name=' + this.selectList.current1.label,
					success: res => {
						this.selectList.mode = 'single-column'
						this.selectList.list = res
						this.selectList.show = true
						uni.hideLoading()
					},
					fail: res => {
						uni.hideLoading()
					}

				})

			},

			// 按钮
			btns(i) {
				if (i == 'sqpp') { //申请品牌
					uni.navigateTo({
						url: '/pages/m-shop/me/publishProduct/addBrand'
					})
				}
			},
			// 删除图片
			delectImg(index, type) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							if (type == 'img1') {
								this.form.img1 = null
								return
							}
							if (type == 'img2') {
								this.form.img2.splice(index, 1)
								return
							}
							// this.imageList.splice(index, 1);

						}

					}
				});
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 点击输入框 显示选择框
			btnInputSelect(index) {
				this.selectList.selectIndex = index
				if (index == 1) {
					this.getbrandList() //获取类目 子类目
				}


			},
			// 确定选择
			onSelect(arr) {
				console.log(arr);
				let current = arr[0];
				if (this.selectList.selectIndex == 1 || this.selectList.selectIndex == 2) {
					this.form.select1 = current.value;
					this.selectList.current1 = current;
					this.form.select2 = arr[1].value;
					this.selectList.current2 = arr[1];
					return
				}



			},

			//上传图片
			chooseImages(img1, count) {
				uni.chooseImage({
					count: count, //允许选择的数量
					success: res => {
						console.log(res);
						for (let i in res.tempFilePaths) {
							this.myUpload(res.tempFilePaths[i], img1)
						}
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)
					}
				})
			},
			// 上传到线上
			myUpload(filePath, type) {
				uni.showLoading({
					title: '上传中...'
				})
				this.$api.upload({
					url: this.uploadurl,
					filePath: filePath,
					name: 'file',
					formData: this.multipart,
				}).then(res => {
					console.log('成功', res);
					uni.hideLoading()
					if (type == 'img1') { // 商品主图
						this.form.img1 = res.url
						return
					}
					if (type == 'img2') { // 商品主图
						this.form.img2.push(res.url)
						return
					}
					if (type == 'img3') { // 商品详情
						this.form.img3.push(res.url)
						return
					}

				}).catch(res => {
					uni.hideLoading()
				})
			},
			// 获取上传限制
			getMultipart() {
				this.$api.get({
					url: '/wanlshop/common/uploadData',
				}).then(res => {
					this.multipart = res.storage == 'local' ? null : res.multipart
					this.uploadurl = res.uploadurl
				})
			},
			// 提交信息
			submit() {


				console.log(this.form);
				this.$refs.form1.validate(valid => {
					console.log(valid);
					if (valid) {
						this.btnLoading = true
						this.$api.post({
							url: '/store.product/shopsortAdd',
							data: {
								pid: this.form.select1,
								name: this.form.name,
								image: this.form.img1
							},
							success: res => {
								uni.showToast({
									title: '新增成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1500)
							},
							fail:error=>{
								this.btnLoading = true
							}
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}


		}
	}
</script>

<style lang="scss" scoped>
	.publishProduct {
		width: 100%;

		.selectInputName {

			::v-deep.u-input__input {
				width: 0 !important;
			}
		}

		.selectInput {
			width: 100%;
			padding: 0 20rpx;

			.selectInputBox {
				zoom: 0.8;
			}

		}

		.formBox {
			.formBox1 {
				padding: 32rpx 32rpx;
				background: #fff;
			}

			.formImg {
				padding: 0 32rpx;
			}


			::v-deep.u-form-item--left {
				display: none;
			}

			::v-deep.u-form-item--right__content__slot {
				display: flex !important;
				flex: 1;
			}

			.imgBox {
				width: 100%;
				flex-wrap: wrap;
			}

			.box-mode {
				width: 132rpx;
				height: 132rpx;
			}

			.full {
				width: 100%;
				height: 100%;

			}

			.imgs {
				border-radius: 10rpx;
				border: 1rpx dashed #ccc;
			}



			.show-box {
				position: relative;
				margin-bottom: 6rpx;
				margin-right: 6rpx;
				width: 132rpx;
				height: 132rpx;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: -6rpx;
					z-index: 1;
				}
			}

			.flexRight {
				display: flex;
				flex-direction: row-reverse;
				margin-top: 16rpx;

				.sqpp {
					font-size: 24rpx;
					color: #FFFFFF;
					background: #3065FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					width: 120rpx;
					height: 38rpx;
					text-align: center;
					line-height: 38rpx;

				}
			}
		}

		.wsn {
			white-space: nowrap
		}

		.w48 {
			width: 48%;
		}

		.w200 {
			width: 200rpx;
		}

		.btnSub {
			padding-bottom: env(safe-area-inset-bottom);
			width: 100vw;
			height: 98rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			z-index: 2;

			.btn::after {
				border: none;
			}

			.btn {
				width: 600rpx;
				height: 62rpx;
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				button {
					background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				}
			}
		}
	}
</style>